<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生列表</title>
		<script src="../../node_modules/layui/dist/layui.js"></script>
		<script src="../../node_modules/mockjs/dist/mock.js"></script>
		<link rel="stylesheet" type="text/css" href="../../node_modules/layui/dist/css/layui.css" />
		<link rel="stylesheet/less" type="text/css" href="../../src/css/style.less" />
		<script src="../../src/css/less.min.js"></script>
	</head>
	<body>
		<!-- 列表 -->
		<table class="layui-hide" id="test" lay-filter="list"></table>
		<!-- 列表操作栏 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script type="text/javascript">
			const { table } = layui;
			
			
			layui.use(function() {
				table.render({
					elem: '#test',
					cellMinWidth: 80,
					cols: [
						[
							{ field: 'num', width: 80, title: '学号', sort: true },
							{ field: 'name', title: '姓名', sort: true },
							{ field: 'sex', title: '性别', sort: true },
							{ field: 'age', title: '年龄', sort: true },
							{ field: 'birth', title: '生日', sort: true },
							{ field: 'className', title: '班级名称', sort: true },
							{ field: 'classType', title: '班级类型', sort: true },
							{ field: 'phone', title: '电话', sort: true },
							{ field: 'address', title: '地址', sort: true },
							{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 168 }
						]
					],
					data: window.parent.classRowData.students
				});
			});
		</script>
	</body>
</html>
